<template>
  <div class='page redpack-flow'>
      <div class="container overscroll-y-auto" :style="containerHeight">
        <div class="flow-detail">
          <div class="flow-avatar">
            <span class="img" v-if="!user.headimgurl">{{ user.name }}</span>
            <img v-if="user.headimgurl" :src="user.headimgurl" />
          </div>
          <p class="description grey-smaller">
            {{ user.name }}的红包
          </p>
          <p class="description grey-smaller">
            红包余额超过100才能提现喔
          </p>
          <h3>{{ redpackBalance | moneyFormate }}</h3>
          <div class="tixian">
            <router-link v-if="redpackBalance > 100" :to="{ name: 'tixian' }" class="btn scrm-default-btn">提现</router-link>
            <span class="disabled-btn" v-if="redpackBalance < 100">提现</span>
          </div>
        </div>
        <group>
          <cell v-for="redpack in list" title="我的名片" :is-link="false">
            <div slot="title">
              <div>{{ redpack.biz_type | getBizType }}</div>
              <div>{{ redpack.insert_time }}</div>
            </div>
            <span slot="value">
              {{ redpack.flow_type | getFlowType }} {{ redpack.flow_money | moneyFormate }}元
            </span>
          </cell>
        </group>
      </div>
    <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
    <crm-tabbar activeItem='mine'></crm-tabbar>
  </div>

</template>
<script>
// import Vue from 'vue'
import crmTabbar from '../components/crm-tabbar'
import salesTarget from '../components/sales-target'
import salesPerformance from '../components/sales-performance'
import salesExecutive from '../components/sales-executive'
import topFilter from '../components/top-filter'
import crmCover from '../components/crm-cover'
// import {Cell, Group} from 'vux'
import Group from 'vux/src/components/group'
import Cell from 'vux/src/components/cell'
// import Scroller from 'vue-scroller'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
    crmTabbar,
    salesTarget,
    salesPerformance,
    salesExecutive,
    topFilter,
    crmCover,
    Cell,
    Group
    // Scroller
  },
  methods: {
    ...mapActions({
      getRedpackFlow: 'getRedpackFlow',
      getRedpackBalance: 'getRedpackBalance'
    })
  },
  computed: {
    isShowCover () {
      return this.$store.state.app.isShowCover
    },
    ...mapState({
      user: state => state.app.user
    })
  },
  mounted () {
    this.$vux.loading.show({text: '加载中'})
    this.getRedpackFlow().then((response) => {
      if (response.data.errcode === 0) {
        this.list = response.data.results
      }
      this.$vux.loading.hide()
    }).catch((e) => {
      this.$vux.loading.hide()
    })

    this.getRedpackBalance().then((response) => {
      if (response.data.errcode === 0) {
        this.redpackBalance = response.data.results.redpacket_balance
      }
    }).catch((e) => {
    })
    this.callJsApi('biz.navigation.setTitle', {title: '红包记录'})
  },
  data () {
    return {
      containerHeight: 'min-height:' + document.body.scrollHeight + 'px;',
      list: [],
      redpackBalance: 0
    }
  }
}
</script>
<style lang="less">

@import "../less/base";

section{
  background-color: white;
}


.redpack-flow {
  // text-align: center;
  .flow-detail {
    padding: 20px 0;
    text-align: center;
  }

  .description {
    text-align: center;
  }

  .disabled-btn {
    display: block;
    background-color: #ccc;
    color: white;
    text-align: center;
    margin: 0 auto;
    border-radius: 4px;
    padding: 6px 0;
    font-size: 14px;
    width: 80%;
    border: 1px solid #ccc;
  }

  .tixian {
    padding: 10px 0;
  }

  .grey-smaller {
    font-size: 12px;
    color: #999999;
  }

  .flow-avatar {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;

    img,.img {
      display: inline-block;
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: contain;
    }

    .img {
      font-size: 14px;
      font-weight: bold;
      background-color: #20a0ff;
      line-height: 60px;
      color: white;
      border-radius: 50%;
    }
  }
}
</style>
